<template>
  <sz-table
    :tableData="tableData"
    :pageName="pageName"
    v-bind="contentTableConfig"
    v-model:pageInfo="pageInfo"
  >
    <!-- 1. 默认功能插槽 -->
    <template #headerHandler>
      <el-button type="primary">新建</el-button>
    </template>
    <template #status="scope">
      <el-button
        size="mini"
        :type="scope.row.enable ?? scope.row.status ? 'success' : 'danger'"
      >
        {{ scope.row.enable ?? scope.row.status ? '启用' : '禁用' }}
      </el-button>
    </template>
    <template #createdTime="scope">
      <strong>{{ $filters.formatTime(scope.row.createAt) }}</strong>
    </template>
    <template #updateTime="scope">
      <strong>{{ $filters.formatTime(scope.row.updateAt) }}</strong>
    </template>
    <template #manage>
      <div class="handle-btns">
        <el-button size="mini" icon="el-icon-edit" type="text">编辑</el-button>
        <el-button size="mini" icon="el-icon-delete" type="text"
          >删除</el-button
        >
      </div>
    </template>

    <!-- 2. 自定义插槽 -->
    <template
      v-for="item in otherSlotsList"
      :key="item.prop"
      #[item.slotName]="scope"
    >
      <template v-if="item.slotName">
        <slot :name="item.slotName" :row="scope.row"></slot>
      </template>
    </template>
  </sz-table>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from 'vue'
import SzTable from '@/base-ui/table'
// import { useStore } from "vuex"

export default defineComponent({
  components: {
    SzTable,
  },
  props: {
    contentTableConfig: {
      type: Object,
      required: true,
    },
    pageName: {
      type: String,
      required: true,
    },
    tableData:{
    type:Array,
    required:true
    }
  },
  setup(props) {
    const pageInfo = ref({ currentPage: 0, pageSize: 10 })
    watch(
      () => pageInfo.value,
      () => getPageData()
    )
    const offsetSize = computed(
      () => pageInfo.value.currentPage * pageInfo.value.pageSize
    )
    // const store = useStore()

    const getPageData = (queryInfo: any = {}) => {}
    // setup类似于created，能够初始化就调用
    getPageData()
    // const tableData = [{ name :1,oldPrice:1,newPrice:1}]
    const total = 0
    // 默认插槽数组
    const defaultSlots = [
      'headerHandler',
      'status',
      'createdTime',
      'updateTime',
      'manage',
    ]
    const diySlots = props.contentTableConfig?.propList.filter((item: any) => {
      if (defaultSlots.includes(item.slotName)) return false
      else return true
    })

    const otherSlotsList = ref(diySlots)
    return {
      tableData:props.tableData,
      getPageData,
      pageInfo,
      // total,
      otherSlotsList,
    }
  },
})
</script>

<style scoped>
.handle-btns {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
